<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>状态值</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <div id="root2"></div>
    <div id="root3"></div>
    <p>微信小程序中，使用data存储数据，通过{{}} 显示在页面上，利用setData更新数据可以让UI同步更新</p>
    <p>React中，使用state 存储数据，通过{} 显示在页面上，利用 setDate() 更新数据，可以让UI同步刷新</p>
    <script type="text/babel">
        // state 状态值：只有 class 类方式创建组件  才能使用 state 
        class Demo extends React.Component {
            state = {
                count: 1,
                subCount: 100
            }


            // 类中有很多方法，通常我们会分成两类，用于事件绑定 和 普通方法
            // 约定俗称的规定: 与事件绑定的方法 带_前缀    不带下划线就是普通方法

            _doAdd() {
                // vue angulat 只修改数据，页面就会自动变更
                // 小程序， react 必须使用 data 和 setData state 和 setState 配合使用
                // this.state.count++
                // this.setState({ count: this.state.count + 1 })

                // this.setState({ count: this.state.count + 1 }, 参数2)
                // 参数2是回调函数，渲染成功时会自动调用参数2
                this.setState({ count: this.state.count + 1 }, () => console.log("回调函数" + this.state.count))
                console.log(this.state.count);
            }

            // 记得练习下箭头函数， 自带this保持
            _doAdd1 = () => {
                this.setState({ count: this.state.count + 1 }, () => console.log("箭头函数回调函数" + this.state.count))
                console.log(this.state.count);
            }
            _doAdd2 = () => {
                this.setState({ count: ++this.state.count }, () => console.log("箭头函数回调函数" + this.state.count))
                console.log(this.state.count);
            }

            _doSub() {
                this.setState({ subCount: this.state.subCount - 1 })
            }

            render() {
                return (
                    <div>
                        <h3>{this.state.count}</h3>
                        <h3>{this.state.subCount}</h3>
                        <button onClick={this._doAdd.bind(this)}>加加</button>
                        <br />
                        <button onClick={this._doAdd1}>箭头函数加加</button>
                        <br />
                        <button onClick={this._doAdd2}>箭头函数加加++</button>
                        <br />
                        <button onClick={this._doSub.bind(this)}>减减</button>

                    </div>
                )
            }
        }

        ReactDOM.render(<Demo />, root)
    </script>
</body>

</html>